<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <link rel="stylesheet" href="/css/tables.css"/>
    <script type="text/javascript" src="/js/jquery.js"></script>
    <title>台桌</title>
</head>
<body class="wx">
<div class="header">
    <div class="left">
        <div class="name">某某某(sky033764)</div>
    </div>
    <div class="right">
        <i class="icon-refresh"></i>
    </div>
</div>
<div class="table-wrapper">
    <div class="table-list">
        <div id="repeat-table-item" class="table-item" style="display:none">
            <div class="item">
                <div class="t_name"></div>
                <div class="t_state">空闲</div>
            </div>
        </div>
    </div>
</div>
<div id="confirm-dialog" class="dinner-counter-wrapper">
    <div class="dialog-content">
        <div class="dinner-message">请输入<span id="dlg-table">A1</span>就餐人数并确认</div>
        <div class="input-wrapper">
            <input type="text" class="counter" id="dlg-seating" value="5"/>
        </div>
        <div class="dinner-btn-wrapper">
            <button class="btn cancel">取消</button>
            <button class="btn confirm">确定</button>
        </div>
    </div>
</div>
<script th:inline="javascript">
    /**
     * 手机端，点击效果补丁
     */
    function phonePatch(){
        $(document).on('touchstart',function(e){});
        $(document).on('touchend',function(e){});
    }

    phonePatch();

    $.getJSON('/api/table/storeid/8',{},function(data,status,xhr){
       console.log(data)

        $.each(data,function(index,item){
            var $newItem = cloneItem();
            $newItem.attr('t-name',item.name);
            $newItem.find('.t_name').text(item.name);
            $newItem.attr('t-seating',item.seating);
            var $state = $newItem.find('.t_state');
            if(item.state == 0){
                $newItem.removeClass('not-idle');
                $state.text(item.seating + "人");
            }else if(item.state == 1){
                $newItem.addClass('not-idle');
                $state.text('就餐中...');
            }

            $repeatTableItem.before($newItem);
            $(".table-item").on("click", tableClicked);
        });
    });

    /*var width = $('.item').width();
    $('.item').height(width);*/

    function tableClicked() {

        var tableName = $(this).attr('t-name');
        var tableSeating = $(this).attr('t-seating');
        $('#dlg-table').text(tableName);
        $('#dlg-seating').val(tableSeating);
        $('#confirm-dialog').show();
    }
    $('.cancel').on('click', function () {
        $('#confirm-dialog').hide();
    });

    $('.confirm').click(function(){
        $('#confirm-dialog').hide();
        location.href="/waiter/menus";
    });

    var $repeatTableItem = undefined;
    function cloneItem(){
        if(!$repeatTableItem){
            $repeatTableItem = $('#repeat-table-item');
        }
        var $item = $repeatTableItem.clone();
        $item.show();
        $item.attr('id',Date.now());
        return $item;
    }

</script>
</body>
</html>